<template>
  <div>
    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />

    <div class="boxL">
      <!-- 左侧 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in categoryList"
          :key="item.id"
          :title="item.name"
          @click="onChange(item.id)"
        />
      </van-sidebar>
      <!-- 右侧 -->
      <div class="right">
        <img :src="ImgEs.banner_url" alt="" />
        <p>{{ ImgEs.front_desc }}</p>

        <h3>{{ ImgEs.name }}</h3>

        <van-grid :column-num="3">
          <van-grid-item
            v-for="value in ImgEs.subCategoryList"
            :key="value.id"
            :icon="value.wap_banner_url"
            :text="value.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getFenLeiData, getFenLeiLData } from "@/utils/http";
export default {
  name: "FenLei",
  data() {
    return {
      value: "", //搜索框
      activeKey: 0, //默认导航索引
      categoryList: [], //左侧导航
      ImgEs: {}, //当前分类
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 切换左边导航
    onChange(id) {
      // this.activeKey = index;
      getFenLeiLData({ id: id })
        .then((res) => {
          // console.log(res);
          this.ImgEs = res.data.data.currentCategory;
        })
        .catch((e) => {});
    },
    getData() {
      getFenLeiData().then((res) => {
        // console.log(res);
        this.categoryList = res.data.data.categoryList;
        this.ImgEs = res.data.data.currentCategory;
      });
    },
  },
};
</script>

<style lang='less' scoped>
.boxL {
  display: flex;
  .right {
    position: relative;
    flex: 1;

    p {
      position: absolute;
      font-size: 16px;
      // top: 66px;
      width: 100%;
      color: #fff;
      // position: absolute;
      top: 13%;
      left: 0%;
      z-index: 222;
      text-align: center;
    }
    img {
      width: 100%;
      display: block;
      height: 140px;

      // 遮罩层
      border-radius: 5px;
      box-shadow: 0 0 6px #000;
      filter: brightness(0.5);
    }
    h3 {
      text-align: center;
      // margin-top: 24px;
      // margin-bottom: 24px;
      line-height: 50px;
      font-size: 16px;
    }
  }
}
</style>